<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'yifanshanggoods' }">一番赏赏品列表</el-breadcrumb-item>
            <el-breadcrumb-item><a>添加赏品</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="basicInfo" status-icon ref="ruleForm" label-width="120px" class="demo-ruleForm">
             <el-form-item label="赏品名称" prop="pass">
               <el-input type="text" placeholder="请输入赏品名称" v-model="basicInfo.name" autocomplete="off"></el-input>
             </el-form-item>
             <el-form-item label="赏品等级" prop="good_level_uuid">
                <el-radio-group v-model="basicInfo.good_level_uuid" size="small">
                  <el-radio-button
                    v-for="(item, index) in game_methods"
                    :key="index"
                    :label="item.uuid"
                    >{{ item.title }}</el-radio-button
                  >
                </el-radio-group>
              </el-form-item>
               <el-form-item label="赏品展示价格" prop="checkPass">
                   <el-input type="number" v-model="basicInfo.price" autocomplete="off"></el-input>
                 </el-form-item>
               <el-form-item label="赏品回收价格" prop="checkPass">
                   <el-input type="number" v-model="basicInfo.recovery_price" autocomplete="off"></el-input>
                 </el-form-item>
               
          
               <el-form-item label="请输入数量" prop="checkPass">
                   <el-input type="number" v-model="basicInfo.count" autocomplete="off"></el-input>
                 </el-form-item>
               <el-form-item label="商品类型" prop="checkPass">
                   <template>
                      <el-radio v-model="basicInfo.good_presale_type" label="现货">现货</el-radio>
                      <el-radio v-model="basicInfo.good_presale_type" label="预售">预售</el-radio>
                    </template>
                 </el-form-item>
               <el-form-item class="presale_time" v-if="basicInfo.good_presale_type == '预售'" label="请选择预售时间" prop="checkPass">
                  <el-date-picker
                    v-model="presale_type_time"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy - MM - dd"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
                 </el-form-item>
             <el-form-item label="赏品图片">
                  <el-upload action="" list-type="picture-card" :http-request="handlePictureCardPreview" ref="upload"
                      :on-change="uploadImage">
                      <img width="175" class="el_upload_img" v-if="basicInfo.display_url" :src="basicInfo.display_url">
                      <i class="el-icon-plus"></i>
                  </el-upload>
              </el-form-item>
          
              <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
              </el-form-item>
        </el-form>
    </div>
</template>

<script>
import good from '../../../../api/jurisdiction'
    export default {
        data() {
            return {
                presale_type_time:'',
                dialogVisible:false,
                basicInfo: {},
                game_methods: [],
                options: [{
                    value: '海贼',
                    label: '海贼'
                }, {
                    value: '龙珠',
                    label: '龙珠'
                }, {
                    value: '高达',
                    label: '高达'
                }, {
                    value: '潮玩',
                    label: '潮玩'
                }, {
                    value: 'LSP',
                    label: 'LSP'
                }],
            }
    },
    created() {
        this.getquanjumethods()
          if (this.$route.params.id) {
            this.basicInfo = JSON.parse(this.$route.params.id);
            this.basicInfo.price = this.basicInfo.price / 100;
            this.basicInfo.recovery_price = this.basicInfo.recovery_price / 100;
        }
          console.log()
    },
    methods: {
            handlePictureCardPreview() {
            },
           getquanjumethods() {
             good.getgoodlevel({params:{game_type:2,page:1,limit:20}}).then((res) => {
                console.log("赏品模式", res);
                if (res.status == 200) {
                    this.game_methods = res.data.data;
                }
            });
           },
            uploadImage(upFile) {
            let file = upFile.raw
            let newName = file.name.split('.')
            let num = crypto.randomUUID()
            let path = `houtaiguanli/yifanshanggoods/${num}.${newName[newName.length - 1]}`
            good.uploadImg({ "path": path }).then((res) => {
                let result = res.data
                const data = new FormData();
                data.append('key', path);
                data.append('Signature', result.authorization);
                data.append('x-cos-security-token', result.token);
                data.append('x-cos-meta-fileid', result.cos_file_id);
                data.append('file', file, path);
                console.log(res)
                good.generalAPI(result.url, data).then((a) => {
                    good.downloadImg({
                        file_list: [
                            {
                                fileid: res.data.file_id,
                                max_age: 0
                            }
                        ]
                    }).then((res) => {
                        let yunurl = res.data.file_list[0].download_url
                        this.basicInfo.display_url = yunurl
                        this.$message.success("赏品图片上传成功")
                        console.log('url', this.basicInfo.display_url)
                    })
                })
            })
        },
  
        submitForm() {
            if (this.basicInfo.display_url) {
                good.addyifanshanggoods({
                    game_uuid: localStorage.getItem('yifanshang_game_uuid'),
                    name:this.basicInfo.name,
                    price:this.basicInfo.price * 100,
                    display_url:this.basicInfo.display_url,
                    recovery_price:this.basicInfo.recovery_price * 100,
                    ip_family:'123',
                    detail:'123',
                    img_desc_url:this.basicInfo.display_url,
                    good_level_uuid:this.basicInfo.good_level_uuid,
                    count:this.basicInfo.count - 0,
                    good_presale_type:this.basicInfo.good_presale_type,
                    good_presale_time:this.presale_type_time,
                }).then((res) => {
                    console.log('添加成功', res)
                        this.$message.success("添加成功")
                        this.$router.push({
                            path:'/layout/choushangguanli/yifanshanggoods',
                            params:{game_id: this.$route.game_id}
                        })
                }).catch(err => {
                    console.log('添加失败',err)
                })
            }else {
                this.$message.warning("图片上传中，请稍等")
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.el-breadcrumb{
    margin-bottom:20px;
}
.el-input{
    width:250px;
}
.presale_time .el-input{
    width:80px;
}
</style>